Изменение источника изображения с помощью jquery

У меня есть данные в моем проекте. Я загружаю его динамически. Я хочу поместить на него раздел предварительного просмотра изображения и хочу извлечь путь к файлу из базы данных. Я использую этот код для создания динамических данных.

<script>
if ($.fn.dataTable.isDataTable( '#example' )){
    var table = $('#example').DataTable();
}
function getData(){
    $('#example tbody').html('');
    var URL_PREFIX = "http://localhost:8983/solr/archiveCore/select?q=strSO_copy:";
    var URL_MIDDLE = "AND PackName_copy:";
    var URL_SUFFIX = "AND DocType_copy:";
    var strSO = "\"" + $("#ngramBoxstrSO").val() + "\"";
    var PackName = "\"" + $("#ngramBoxPackName").val() + "\"";
    var DocType = "\"" + $("#ngramBoxDocType").val() +"\"";
    var URL=URL_PREFIX + strSO + URL_MIDDLE + PackName + URL_SUFFIX + DocType;
    $.ajax({
        url:URL,
        dataType:'jsonp',
        jsonp : 'json.wrf',
        type :'get',
        cache :false,
        success: function(data){
            var docs=data.response.docs;
            var html='';
            $.each(docs,function(key,value){
                html+='<tr>';
                html+='<td>'+value.id+'</td>';
                html+='<td>'+value.strSO+'</td>';
                html+='<td>'+value.PackName+'</td>';
                html+='<td>'+value.DocType+'</td>';
                html+='<td>'+value.DocName+'</td>';
                html+='<td class = "text-center"><button id = "'+value.FilePath+'" type = "button" onclick = "openDocument(this.id)" class = "btn btn-sm" >OPEN</td>';
                html+='<td class = "text-center"><a href = "#" class = "preview">Image Preview<img id = "images" src = "" class = "hide-image"></a></td>';
                html+='</tr>';
                if (value.extType= = "JPG")
                    {
                        $("#images").attr("src",value.FilePath);
                        console.info(value.FilePath);
                    }
            });
            $('#example').DataTable().destroy();
            $('#example tbody').html(html);
            var table=$('#example').DataTable({
                "aaSorting" : [],

            });
        },
    });


};
</script>

Когда я запускаю свой проект, источник изображения не меняется. В чем проблема? Я не мог найти его.

Во-первых, обратите внимание, что вы дублируете один и тот же id несколько раз в HTML, который добавляете в DOM. Вам нужно использовать уникальные идентификаторы или общий класс. Кроме того, вы отладили это, чтобы проверить, успешен ли запрос AJAX? Ошибки в консоли есть? Каково значение data, когда ответ завершится? Действителен ли путь в key.FilePath для домена, из которого вы его вызываете?

— 15.04.2019 09:56

Я внес некоторые изменения в свои коды. Я получаю путь к файлу с помощью value.FilePath, но проблема с источником изображения все еще не решена.

— 15.04.2019 10:34

посмотри ответ может тебе поможет бро

— 15.04.2019 10:37

jquery

15.04.2019 09:54

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используя jquery, вы можете получить доступ к атрибуту «src» в теге img и изменить его так, как вы хотите, проверьте приведенный ниже код, который может вам помочь.

$('img[name = "image"]').attr('src','updatedBathri');  // where image is the name of the image tag

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src = "bathri" name = "image"/>

@MustafaBerkanDemir проверьте две вещи: 1. есть ли значение в value.FilePath 2. Идентификатор #images должен быть только для этого конкретного тега изображения, потому что идентификатор будет работать только с первым элементом, если он задан для многих тегов. Дайте уникальный идентификатор для конкретного тега изображения или получите доступ к нему по имени.

— 15.04.2019 11:34

первый вариант в порядке, я даю уникальный идентификатор тега изображения во втором варианте, но изображение не приходит. Я проверяю, неверный ли путь к файлу, но это правда. Пробовал другой файл образа, не получается.

— 15.04.2019 12:25

Щелкните правой кнопкой мыши тег изображения и выберите параметр проверки. Затем проверьте тег src, имеет ли он путь, который вы хотите. если он есть, то в коде нет проблем, вам нужно обновить URL-адрес изображения.

— 15.04.2019 12:30

Когда я выбираю опцию проверки, это выглядит так src(unknown). Так что я думаю, что проблема здесь $("#showImage").attr("src",value.FilePath);

— 15.04.2019 12:39

@MustafaBerkanDemir $("#images").attr("src",value.FilePath) это идентификатор, который вы указали для тега изображения, используйте это. undefined означает, что в value.FilePath нет значения. получить значение в console.info для того, что вы уже использовали

— 15.04.2019 13:15

Хорошо, я сделал это так html+='<td class = "text-center"><a href = "#" class = "preview">Image Preview<img id = "showImage" src = "'+value.FilePath+'" class = "hide-image"></a></td>';. Но есть еще одна проблема :) Когда тип файла не jpg, я хочу отключить событие наведения мыши. Я пытался что-то исправить, но пока не получается.

— 15.04.2019 13:42

Используйте этот css, чтобы отключить событие наведения мыши. .element {события указателя: нет; } проголосуйте за вопрос, если у вас есть ответ, так что это будет полезно для других

— 15.04.2019 18:02

15.04.2019 10:36